<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%@ taglib prefix="shiro" uri="http://wl.shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>编辑角色</title>
<link rel="stylesheet" href="${ctx }/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">  
	.line{
		    line-height: 0;
		    border-top:none;
    		float: none;
	}
    .ztree li span.button.ico_docu {  
        background-position: -110px 0;  
        margin-right: 2px;  
        vertical-align: top;  
	}  
</style>
</head>
<body>
<article class="page-container">
	<form action="" method="post" class="form form-horizontal" id="form-admin-role-add">
		<input type="hidden"  name="id"   id="id"   value="${role.id}">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="${role.name }" placeholder="" id="name" name="name">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>英文名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="${role.enname }" placeholder="" id="enname" name="enname">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">备注：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="remarks" name="remarks">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">网站角色：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<ul id="treeDemo" class="ztree" ></ul>
				<!--<c:forEach items="${rootMenu }"	var="menu">
				<dl class="permission-list">
					<dt>
						<label>
							<input type="checkbox" value="${menu.id }" name="user-Character-0" id="user-Character-0">
							${menu.name }</label>
					</dt>
					<c:if	test="${menu.childList != null && fn:length(menu.childList) >0}">
					<dd>
						<c:forEach items="${menu.childList }"  var="child">
						<dl class="cl permission-list2">
							<dt>
								<label class="">
									<input type="checkbox" value="${child.id }" name="user-Character-0-0" id="user-Character-0-0">
									${child.name }</label>
							</dt>
							<dd>
								<c:if test="${child.childList !=null && fn:length(child.childList)>0 }">
								<c:forEach  items="${child.childList }"  var="cc">
								<label class="">
									<input type="checkbox" value="${cc.id }" name="user-Character-0-0-0" id="user-Character-0-0-0">
									${cc.name }</label>
								</c:forEach>
								</c:if>
							</dd>
						</dl>
						</c:forEach>
					</dd>
					</c:if>
				</dl>
				</c:forEach>-->
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<button type="submit" class="btn btn-success radius" id="admin-role-save" name="admin-role-save"><i class="icon-ok"></i> 确定</button>
			</div>
		</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${ctx }/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${ctx }/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${ctx }/static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="${ctx }/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${ctx }/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${ctx }/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="${ctx }/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="${ctx }/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="${ctx }/lib/pinyin.js"></script>
<script type="text/javascript">
$(function(){
	setZTree();
	$(".permission-list dt input:checkbox").click(function(){
		$(this).closest("dl").find("dd input:checkbox").prop("checked",$(this).prop("checked"));
	});
	$(".permission-list2 dd input:checkbox").click(function(){
		var l =$(this).parent().parent().find("input:checked").length;
		var l2=$(this).parents(".permission-list").find(".permission-list2 dd").find("input:checked").length;
		if($(this).prop("checked")){
			$(this).closest("dl").find("dt input:checkbox").prop("checked",true);
			$(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",true);
		}
		else{
			if(l==0){
				$(this).closest("dl").find("dt input:checkbox").prop("checked",false);
			}
			if(l2==0){
				$(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",false);
			}
		}
	});
	var menuIds = "${menuIds}";
	$('input[type="checkbox"]').each(function(){
        if(menuIds.indexOf($(this).val())>=0){
        	$(this).prop("checked",true);
        }
    });
	
	$("#name").blur(function(){
		name = $(this).val();
		if(name != null && name != ""){
			$("#enname").val(pinyin.getCamelChars(name).toLowerCase());
		}else{
			$("#enname").val("");
		}
	})
	
	$("#form-admin-role-add").validate({
		rules:{
			name:{
				required:true,
			},
			enname:{
				required:true,
			}
		},
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
			var ids = new Array(); 
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = treeObj.getCheckedNodes(true);
			for (var i = 0; i < nodes.length; i++) {
				ids.push(nodes[i].id);
			}
			if(ids.length==0){
				layer.alert("权限未选择");
				return;
			}
			var formData = {"id":$('#id').val(),"name":$('#name').val(),"enname":$('#enname').val()};	
			formData.menuIds = ids;
			$.ajax({
                type: 'POST',
                url: $ctx + '/a/role/edit',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(formData),
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        layer.alert('编辑成功', {
                        	  closeBtn: 0
                        }, function(){
                        	window.parent.location.reload();
                        	var index = parent.layer.getFrameIndex(window.name);
                        	parent.layer.close(index);
                       	});
                    } else {
                        layer.alert(data.message);
                    }
                }
            });
		}
	});
});

function setZTree(){
	 var setting = {
			 view: {
				fontCss : {"font-family": "微软雅黑", "font-size": "16px"}
			 },
			 data: {
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "pid",
						rootPId: 1
					}
			},
			 check:{
				 enable: true,
				 chkboxType :{ "Y" : "ps", "N" : "ps" }
			 },
			 callback: {
				onClick: function(event, treeId, treeNode){
				}
			}
		};
	 var zNodes = JSON.parse('${treeData}');
	 zTreeObj = $.fn.zTree.init($("#treeDemo"), setting,  zNodes);
	 
	 var menuIds = '${menuIds}'.split(',');
	 for(var i=0;i<menuIds.length;i++){
		 var node = zTreeObj.getNodeByParam("id", menuIds[i]);
		 zTreeObj.checkNode(node, true);
	 }
}
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>